<template>
  <div>
    <el-row>
      <el-col :span="7" :offset="3" style="margin-top: 30px">
        <el-card shadow="never">
          <el-image style="width: 200px;height: 150px;margin-top: 13px;border-radius: 10%" :src="src">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-descriptions style="margin-top: 15px" :column="1">
            <el-descriptions-item label="课程名">{{ this.course.courseName }}</el-descriptions-item>
            <el-descriptions-item label="课程学分">
              <el-tag size="small">{{ this.course.coursePoint }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="课程学时">
              <el-tag size="small">{{ this.course.coursePeriod }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="课程描述">
              {{ this.course.courseContent }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="9" :offset="2" style="margin-top: 30px">
        <el-card shadow="hover">
          <el-form :model="form" label-width="100px" ref="mainForm">
            <el-form-item label="课程名称">
              <el-input v-model="form.courseName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程学分">
              <el-input v-model="form.coursePoint" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程学时">
              <el-input v-model="form.coursePeriod" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="this.form.courseStatus!==1" label="课程状态">
              <el-select style="width: 293.26px" v-model="form.courseStatus" placeholder="请选择">
                <el-option
                  v-for="(item,index) in status"
                  :key="index"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程简介">
              <el-input
                type="textarea"
                :rows="3"
                v-model="form.courseContent">
              </el-input>
            </el-form-item>
            <el-row>
              <el-col :span="4" :offset="6">
                <el-button size="small" type="primary" @click="edit">保存</el-button>
              </el-col>
              <el-col :span="4" :offset="4">
                <el-button size="small" type="danger" @click="del">删除</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CourseEdit',
  data () {
    return {
      course: {},
      src: require('../../../assets/fengmian.jpg'),
      form: {
        courseId: 0,
        courseName: '',
        courseStatus: 0,
        coursePoint: '',
        coursePeriod: '',
        courseContent: '',
      },
      status: [
        {
          name: '结束后可见',
          value: 2
        },
        {
          name: '结束后不可见',
          value: 3
        }
      ]
    }
  },
  methods: {
    init () {
      this.course = JSON.parse(JSON.stringify(this.$store.state.course))
      this.form = JSON.parse(JSON.stringify(this.$store.state.course))
    },
    edit () {
      this.$http({
        url: '/api/course',
        method: 'put',
        data: {
          courseId: this.form.courseId,
          courseStatus: this.form.courseStatus,
          courseName: this.form.courseName,
          coursePoint: this.form.coursePoint,
          coursePeriod: this.form.coursePeriod,
          courseContent: this.form.courseContent
        }
      }).then(res => {
        if (res.data.code === 6062) {
          this.$message({
            type: 'success',
            message: '更新成功!',
            duration: 2000,
          })
          this.$store.commit('changeCourse', { course: this.form })
        } else {
          this.$message({
            type: 'error',
            message: '更新失败!',
            duration: 1500,
          })
        }
      })
    },
    del () {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: '/api/course/' + this.course.courseId,
          method: 'delete'
        }).then(res => {
          if (res.data.code === 2000) {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 2000,
            })
            this.$router.push('/admin/index')
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!',
              duration: 1500,
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    disable () {

    },
  },
  created () {
    this.init()
  },
  computed: {
    changeCourse () {
      return this.$store.state.course
    }
  },
  watch: {
    changeCourse () {
      this.course = JSON.parse(JSON.stringify(this.$store.state.course))
      this.form = JSON.parse(JSON.stringify(this.$store.state.course))
    }
  },
}
</script>

<style scoped>

</style>
